<template>
  <WorthHeader>网易严选</WorthHeader>
  <!-- <div style="height: 50px; background-color: aqua"></div> -->
  <div class="main">
    <img class="logo" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />

    <van-form @submit="onSubmit">
      <van-cell-group inset label-width="150px">
        <van-field v-model="loginForm.phone" name="phone" placeholder="请输入手机号" :rules="[{ required: true, message: '请输入手机号' }]" />
        <van-field v-model="loginForm.password" type="password" name="password" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]" />
      </van-cell-group>
      <div class="text">
        <span>忘记密码？</span>
        <span class="right" @click="toRegistration">注册</span>
      </div>
      <div style="margin: 16px">
        <van-button block type="danger" native-type="submit"> 登录 </van-button>
      </div>
    </van-form>
    <div class="other">其他方式登录></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'Login'
})
</script>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { Toast } from 'vant'
import 'vant/es/toast/style/index'
const userStore = useUserInfoStore()
const router = useRouter()
const toRegistration = () => {
  router.push({
    path: '/item/registration'
  })
}
// console.log(userStore)
const loginForm = ref({
  phone: '',
  password: ''
})
const onSubmit = async (values: { phone: string; password: string }) => {
  const { phone, password } = values
  try {
    await userStore.login(phone, password)
    router.push({
      path: '/item/center'
    })
    Toast.success('登录成功')
    // alert('登录成功')
  } catch (e) {
    Toast.fail('登录失败')
  }
  await userStore.getUserInfo()
}
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 412px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main .logo {
  width: 134px;
  height: 45px;
  margin-top: 40px;
  margin-bottom: 120px;
}
.main .text {
  width: 350px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #7f7f7f;
  margin-left: 32px;
  margin-top: 20px;
}
.main .text .right {
  padding-right: 30px;
}
.main .other {
  margin-top: 50px;
  font-size: 14px;
  color: #4c4c4c;
}
</style>
